<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="components/openlayers/theme/default/style.css" type="text/css">
    
    <link rel="stylesheet" href="vendor/fd-slider/fd-slider.css" type="text/css">

<!--     <link href="/vendor/holo/holo-base-elements.css" media="screen, projection" rel="stylesheet" type="text/css" /> 
    <link href="/vendor/holo/holo-light-elements.css" media="screen, projection" rel="stylesheet" type="text/css" /> 
 --> 
    <link href="build/css/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> 
    <link href="build/css/print.css" media="print" rel="stylesheet" type="text/css" />
    <!--[if IE]>
      <link href="build/css/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <![endif]-->

    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBtdEVtyNHs_XtvQ3pcx26R89wYQu3-BEw&sensor=false">
    </script>
  </head>
  <body>

<div id="layout">
  <nav id="header" class="top-bar">
    <section class="top-bar-section">
      <!-- Left Nav Section -->
      <ul class="left">
        <li class="has-form">
          <form>
             <input id="frq-input" type="text" data-bind="value: device.Frequency">
          </form>
        </li>
        <li class="disabled">
          <a href="#" style="padding: 0 15px 0 0">
            <div class="title">&nbsp;</div>
            <div class="value">MHz</div>
          </a>
        </li>
        <li class="divider"></li>

        <li class="has-dropdown"><a href="#">
          <div class="title">Df Mode</div>
          <div class="value" data-bind="text: device.DfMode"></div>
        </a>
          <ul class="dropdown">
            <li><a href="#">CONT</a></li>
            <li><a href="#">GATE</a></li>
            <li><a href="#">NORM</a></li>
            <li class="divider"></li>
          </ul>
        </li>
        <li class="divider"></li>
        
        <li class="has-dropdown"><a href="#">
          <div class="title">Df Bandwidth</div>
          <div class="value" data-bind="text: device.DfBandwidth"></div>
        </a>
          <ul class="dropdown">
            <li><a href="#">3000 kHz</a></li>
            <li><a href="#">1500 kHz</a></li>
            <li class="active"><a href="#">500 Hz</a></li>
            <li><a href="#">120 Hz</a></li>
            <li class="divider"></li>
          </ul>
        </li>
        <li class="divider"></li>
        
        <li class="has-dropdown"><a href="#">
          <div class="title">Df Avg. Time</div>
          <div class="value" data-bind=""></div>
        </a>
          <ul class="dropdown">
            <li><a href="#">&nbsp;</a></li>
            <li class="divider"></li>
          </ul>
        </li>
        <li class="divider"></li>
        
<!--         <li class="disabled">
          <a href="#">
            <div class="title">Level</div>
            <div class="value">0 dBμV</div>
          </a>
        </li>
        <li class="divider"></li>

        <li class="disabled">
          <a href="#">
            <div class="title">Quality</div>
            <div class="value">60 %</div>
          </a>
        </li>
        <li class="divider"></li>
 -->
        <li class="disabled">
          <a href="#">
            <div class="title">M. Locator</div>
            <div class="value" data-bind="text: ml.state"></div>
          </a>
        </li>
        <li class="divider"></li>
      </ul>

      <ul class="right">
        <li class="">
          <a href="#" onclick="$('#sim-handle').click()" class="">
            <i class="icon-cog"></i>
            Settings
          </a>
        </li>
      </ul>
    </section>
  </nav>

  <div class='main'>
    <div class="content">
      <div id="map"></div>
    </div>
    <div class="sidebar hidden">
      <div class="row">
        <div class="large-2 columns"><select id="provider"></select></div>
        <div class="large-2 columns"><select id="renderer"></select></div>
        <div class="large-2 columns"><select id="rectsize"></select></div>
        <div class="large-2 columns"><select id="framesize"></select></div>
        <div class="large-2 columns"><input type="range" min="0" max="360" value="0" /></div>
        <div class="large-2 columns">
          <button class="tiny button" id="add-data">Add</button>
          <button class="tiny button" id="rm-data">Remove</button>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="footer">
  <nav class="top-bar">
    <section class="top-bar-section">
      <ul class="left">
        <li class="disabled">
          <a href="#">
            <div>
              <div class="title">GPS Pos</div>
              <div class="value gps-pos" style="cursor:pointer">N 48.141900 E 11.435800</div>
            </div>
          </a>
        </li>
        <li class="disabled">
          <a href="#">
            <div>
              <div class="title">Level</div>
              <div class="value" style="display:inline-block;width:50px">0 dBμV</div>
            </div>
          </a>
        </li>
        <li class="disabled">
          <a href="#">
            <div>
              <div class="title">Quality</div>
              <div class="value" style="display:inline-block;width:50px">60 %</div>
            </div>
          </a>
        </li>
      </ul>

      <ul class="right">

        <li class="divider"></li>
        <li class="disabled">
          <a href="#">
            <div  class="audio-buttons">
              <div class="title">Df Recorder</div>
              <div class="value" style="cursor:pointer;position:relative"> 
                <i class="icon-circle df-record" title="Record Df"></i>
              </div>
            </div>
          </a>
        </li>

        <li class="divider"></li>
        <li class="disabled">
          <a href="#">
            <div  class="audio-buttons">
              <div class="title">Audio</div>
              <div class="value" style="cursor:pointer;position:relative"> 
                <i class="icon-volume-down audio-volume">
                  <div class="slider" style="position:absolute;bottom:15px;left:-15px;background:transparent;width:50px;height:110px"><input type="range" style="-webkit-appearance:slider-vertical;width:20px;height:92px;" min="0" max="100" step="1" value="20" /></div>
                </i>
                <i class="icon-play audio-play" title="Play audio"></i>
                <i class="icon-circle audio-record" title="Record audio"></i>
              </div>
            </div>
          </a>
        </li>

        <li class="divider"></li>
        <li class="has-dropdown"><a href="#">
          <div data-bind="text: device.Demodulation"></div>
        </a>
          <ul class="dropdown">
            <li><a href="#">AM</a></li>
            <li class="active"><a href="#">FM</a></li>
            <li><a href="#">CW</a></li>
            <li><a href="#">USB</a></li>
            <li><a href="#">LSB</a></li>
            <li><a href="#">IQ</a></li>
            <li class="divider"></li>
          </ul>
        </li>

        <li class="divider"></li>
        <li class="has-dropdown"><a href="#">
          <div>DDF007</div>
        </a>
          <ul class="dropdown">
            <li class="divider"></li>
            <li><a href="#">DDF007</a></li>
            <li><a href="#">DDF205</a></li>
            <li><a href="#">DDF255</a></li>
            <li><a href="#">DDF550</a></li>
          </ul>
        </li>

      </ul>

    </section>
  </nav>
</div>

<div id="chart-overlay"></div>
<div class="mini-chart rx-chart">
  <div class="chart-header">
    <form class="custom">
      <div class="row collapse">

        <div class="small-3 columns">
          <div class="caption">Spectrum</div>
        </div>
        <div class="small-3 columns">
          <select>
            <option disabled>Bandwidth</option>
            <option>150 Hz</option>
            <option>300 Hz</option>
            <option>600 Hz</option>
            <option>1.5 kHz</option>
            <option>2.4 kHz</option>
            <option>6 kHz</option>
            <option>9 kHz</option>
            <option>12 kHz</option>
            <option>15 kHz</option>
            <option>30 kHz</option>
            <option selected>50 kHz</option>
            <option>130 kHz</option>
            <option>150 kHz</option>
            <option>250 kHz</option>
            <option>300 kHz</option>
            <option>500 kHz</option>
          </select>
        </div>
        <div class="small-3 columns">
          <select>
            <option disabled>Step</option>
            <option>62.5 Hz</option>
            <option>100 Hz</option>
            <option>125 Hz</option>
            <option>200 Hz</option>
            <option>250 Hz</option>
            <option>312.5 Hz</option>
            <option>500 Hz</option>
            <option>625 Hz</option>
            <option>1 kHz</option>
            <option>1.25 kHz</option>
            <option>2 kHz</option>
            <option>2.5 kHz</option>
            <option>3.125 kHz</option>
            <option>5 kHz</option>
            <option selected>6.25 kHz</option>
            <option>10 kHz</option>
            <option>12.5 kHz</option>
            <option>20 kHz</option>
            <option>25 kHz</option>
            <option>50 kHz</option>
            <option>100 kHz</option>
            <option>200 kHz</option>
            <option>500 kHz</option>
          </select>
        </div>
        <div class="small-3 columns">
          <select>
            <option disabled>Span</option>
            <option>1 kHz</option>
            <option>2 kHz</option>
            <option>5 kHz</option>
            <option>10 kHz</option>
            <option>20 kHz</option>
            <option>50 kHz</option>
            <option>100 kHz</option>
            <option>200 kHz</option>
            <option>500 kHz</option>
            <option>1 MHz</option>
            <option>2 MHz</option>
            <option>5 MHz</option>
            <option selected>10 MHz</option>
          </select>
        </div>
      </div>
    </form>
  </div>
  <div class="svg"></div>
</div>

<div class="mini-chart df-chart">
  <div class="chart-header">
    <div class="caption">DF</div>
  </div>
  <div class="svg">
  </div>
</div>
<div class="mini-chart lot-chart">
  <div class="chart-header">
    <div class="caption">Level over time</div>
  </div>
  <div class="svg">
    <svg width="115" height="110">
      <rect x="5" width="110" height="110"></rect>
  </svg>
  </div>
</div>

<div id="sim">
<div id="sim-overlay"></div>
<div id="sim-container"></div>
<div id="sim-handle"></div>

<div class="sim-btn" sim-data="" sim-icon="icon-screenshot" sim-pos="6">
  <div>Mobile&nbsp;Locator</div>
  <div class="row000">
    <div class="right" style="padding-right:10px">
      <div class="holo-switch">
        <input id="x0" name="switch-ml" type="checkbox" checked />
        <label for="x0"></label>
      </div>
    </div>
  </div>
</div>
<div class="sim-btn" sim-data="" sim-icon="icon-wrench" sim-pos="6">
  <div>Level:&nbsp;<span class="slider-value"></span></div>
  <div class="row000">
    <div class="right" style="padding-right:10px">
      <div class="custom" style="width:120px">
        <input type="text" min="-30" max="120" value="0" style="width:100px" class="slider" />
      </div>
    </div>
  </div>
</div>
<div class="sim-btn" sim-data="" sim-icon="icon-wrench" sim-pos="6">
  <div>Quality:&nbsp;<span class="slider-value">10</span>%</div>
  <div class="row000">
    <div class="right" style="padding-right:10px">
      <div class="custom" style="width:120px">
        <input type="text" min="0" max="100" value="10" style="width:100px" class="slider"/>
      </div>
    </div>
  </div>
</div>
<div class="sim-btn" sim-data="" sim-icon="icon-exchange" sim-pos="6">
  <div>Level&nbsp;in</div>
  <div class="row000">
    <div class="right" style="padding-right:10px">
      <form class="custom" style="margin-bottom:0">
        <label for="radio1" style="display:inline"><input name="radio1" type="radio" id="radio1" style="display:none;" CHECKED><span class="custom radio checked"></span> <span style="display:inline-block;width:45px">dBμV</span></label>
        <label for="radio1" style="display:inline"><input name="radio1" type="radio" id="radio1" style="display:none;"><span class="custom radio"></span> dBm</label>
      </form>
    </div>
  </div>
</div>
<div class="sim-btn" sim-data="" sim-set="display" sim-pos="6">
  <div>Spectrum</div>
  <div class="row">
    <div class="right" style="padding-right:10px">
      <div class="holo-switch">
        <input id="x1" name="rx-chart" class="chart-switch" type="checkbox" checked />
        <label for="x1"></label>
      </div>
    </div>
  </div>
</div>
<div class="sim-btn" sim-data="" sim-set="display" sim-pos="6">
  <div>Level&nbsp;over&nbsp;time</div>
  <div class="row">
    <div class="right" style="padding-right:10px">
      <div class="holo-switch">
        <input id="x3" name="lot-chart" class="chart-switch" type="checkbox" checked />
        <label for="x3"></label>
      </div>
    </div>
  </div>
</div>
<div class="sim-btn" sim-data="" sim-set="display" sim-pos="6">
  <div>DF&nbsp;wind&nbsp;rose</div>
  <div class="row">
    <div class="right" style="padding-right:10px">
      <div class="holo-switch">
        <input id="x2" name="df-chart" class="chart-switch" type="checkbox" checked />
        <label for="x2"></label>
      </div>
    </div>
  </div>
</div>

<div class="sim-btn" sim-data="anchor:gps" sim-set="display">
  <div>Cloud Opacity</div>
  <div class="row000">
    <div class="right" style="padding-right:10px">
      <div class="custom" style="width:120px">
        <input type="text" min="0" max="100" value="50" style="width:100px" class="slider"/>
      </div>
    </div>
  </div>
</div>
<div class="sim-btn" sim-data="anchor:gps" sim-set="display">
  <div>Cloud&nbsp;Color</div>
  <div class="row">
    <div class="right" style="padding-right:10px">
      <form class="custom">
        <select>
            <option>Red</option>
        </select>
      </form>
    </div>
  </div>
</div>


<div class="sim-btn" sim-data="set:rx" sim-icon="icon-signal"><div>RX</div></div>
<div class="sim-btn" sim-data="set:locate" sim-icon="foundicon-location"><div>DF/Locate</div></div>
<div class="sim-btn" sim-data="set:compass" sim-icon="foundicon-compass" sim-pos="5"><div>Compass</div></div>
<div class="sim-btn" sim-data="set:map" sim-icon="icon-globe" sim-pos="5"><div>Map</div></div>
<div class="sim-btn" sim-data="set:display" sim-icon="foundicon-photo"><div>Display</div></div>
<div class="sim-btn" sim-data="url:logout" sim-icon="icon-off" sim-pos="7"><div>Logout</div></div>

<div class="sim-btn" sim-data="anchor:modulation" sim-set="rx">
  <div>Modulation</div>
  <div class="row">
    <div class="right" style="padding-right:10px">
      <form class="custom">
        <select>
            <option>AM</option>
            <option>FM</option>
            <option>CW</option>
            <option>USB</option>
            <option>LSB</option>
            <option>IQ</option>
        </select>
      </form>
    </div>
  </div>
</div>
<div class="sim-btn" sim-data="anchor:bandwith" sim-set="rx">
  <div>Bandwidth</div>
  <div class="row">
    <div class="right" style="padding-right:10px">
      <form class="custom">
        <select>
            <option>150 Hz</option>
            <option>300 Hz</option>
            <option>600 Hz</option>
            <option>1.5 kHz</option>
            <option>2.4 kHz</option>
            <option>6 kHz</option>
            <option>9 kHz</option>
            <option>12 kHz</option>
            <option>15 kHz</option>
            <option>30 kHz</option>
            <option selected>50 kHz</option>
            <option>130 kHz</option>
            <option>150 kHz</option>
            <option>250 kHz</option>
            <option>300 kHz</option>
            <option>500 kHz</option>
        </select>
      </form>
    </div>
  </div>
</div>
<div class="sim-btn" sim-data="anchor:step" sim-set="rx">
  <div>Step</div>
  <div class="row">
    <div class="right" style="padding-right:10px">
      <form class="custom">
        <select>
            <option>62.5 Hz</option>
            <option>100 Hz</option>
            <option>125 Hz</option>
            <option>200 Hz</option>
            <option>250 Hz</option>
            <option>312.5 Hz</option>
            <option>500 Hz</option>
            <option>625 Hz</option>
            <option>1 kHz</option>
            <option>1.25 kHz</option>
            <option>2 kHz</option>
            <option>2.5 kHz</option>
            <option>3.125 kHz</option>
            <option>5 kHz</option>
            <option selected>6.25 kHz</option>
            <option>10 kHz</option>
            <option>12.5 kHz</option>
            <option>20 kHz</option>
            <option>25 kHz</option>
            <option>50 kHz</option>
            <option>100 kHz</option>
            <option>200 kHz</option>
            <option>500 kHz</option>
        </select>
      </form>
    </div>
  </div>
</div>
<div class="sim-btn" sim-data="anchor:span" sim-set="rx">
  <div>Span</div>
  <div class="row">
    <div class="right" style="padding-right:10px">
      <form class="custom">
        <select>
            <option>1 kHz</option>
            <option>2 kHz</option>
            <option>5 kHz</option>
            <option>10 kHz</option>
            <option>20 kHz</option>
            <option>50 kHz</option>
            <option>100 kHz</option>
            <option>200 kHz</option>
            <option>500 kHz</option>
            <option>1 MHz</option>
            <option>2 MHz</option>
            <option>5 MHz</option>
            <option selected>10 MHz</option>
        </select>
      </form>
    </div>
  </div>
</div>
<div class="sim-btn" sim-data="" sim-set="rx" sim-pos="6">
  <div>Auto.&nbsp;Attenuation</div>
  <div class="row">
    <div class="right" style="padding-right:10px">
      <div class="holo-switch">
        <input id="rx1" name="rx-auto-attenuation" type="checkbox" checked />
        <label for="rx1"></label>
      </div>
    </div>
  </div>
</div>
<div class="sim-btn" sim-data="anchor:gps" sim-set="rx" sim-icon="icon-volume-down">
  <div>Audio Volume</div>
  <div class="row000">
    <div class="right" style="padding-right:10px">
      <div class="custom" style="width:120px">
        <input type="text" min="0" max="100" value="50" style="width:100px" class="slider"/>
      </div>
    </div>
  </div>
</div>
<div class="sim-btn" sim-data="cmd:audio-play" sim-set="rx" sim-icon="icon-play"><div>Play Audio</div></div>
<div class="sim-btn" sim-data="cmd:audio-record" sim-set="rx" sim-icon="icon-circle"><div>Record Audio</div></div>

<div class="sim-btn" sim-data="anchor:gps" sim-set="compass"><div>GPS</div></div>
<div class="sim-btn" sim-data="anchor:magnetic" sim-set="compass"><div>Magnetic</div></div>

<div class="sim-btn" sim-data="anchor:df-mode" sim-set="locate">
  <div>Df&nbsp;Mode</div>
  <div class="row">
    <div class="right" style="padding-right:10px">
      <form class="custom">
        <select>
            <option>CONT</option>
            <option>GATE</option>
            <option>NORM</option>
        </select>
      </form>
    </div>
  </div>
</div>
<div class="sim-btn" sim-data="anchor:df-bandwidth" sim-set="locate">
  <div>Df&nbsp;Bandwith</div>
  <div class="row">
    <div class="right" style="padding-right:10px">
      <form class="custom">
        <select>
            <option>3000 kHz</option>
            <option>1500 kHz</option>
            <option>500 kHz</option>
            <option>120 kHz</option>
        </select>
      </form>
    </div>
  </div>
</div>
<div class="sim-btn" sim-data="anchor:df-averaging-time" sim-set="locate">
  <div>Df&nbsp;Avg.&nbsp;Time</div>
  <div class="row">
    <div class="right" style="padding-right:10px">
      <form class="custom">
        <select>
            <option></option>
        </select>
      </form>
    </div>
  </div>
</div>
<div class="sim-btn" sim-data="cmd:df-record" sim-set="locate" sim-icon="icon-circle"><div>Record DF</div></div>
<div class="sim-btn" sim-data="anchor:locate-scan-recording" sim-set="locate"><div>Scan Recording</div></div>
<div class="sim-btn" sim-data="anchor:locate-close-session" sim-set="locate"><div>Close Recording Session</div></div>
<div class="sim-btn" sim-data="anchor:locate-load-session" sim-set="locate"><div>Load Last Recording Session</div></div>

<div class="sim-btn" sim-data="" sim-set="map" sim-pos="6">
  <div>True&nbsp;Heading</div>
  <div class="row">
    <div class="right" style="padding-right:10px">
      <div class="holo-switch">
        <input id="map-x1" name="map-true-heading" type="checkbox" checked />
        <label for="map-x1"></label>
      </div>
    </div>
  </div>
</div>
<div class="sim-btn" sim-data="cmd:center-map" sim-set="map"><div>Center Map to Current Location</div></div>
<div class="sim-btn" sim-data="cmd:center-map-ml" sim-set="map"><div>Center Map to Mobile Locator</div></div>
<div class="sim-btn" sim-data="anchor:change-map" sim-set="map">
  <div>Map</div>
  <div class="row">
    <div class="right" style="padding-right:10px">
      <form class="custom">
        <select data-bind="value: map">
            <option value="Google">Google</option>
            <option value="OSM">OSM</option>
            <option value="Bing">Bing</option>
        </select>
      </form>
    </div>
  </div>
</div>
</div>

    <script src="components/jquery/jquery.js"></script>
    <script src="components/jquery-ui/ui/jquery-ui.js"></script>

    <script src="components/foundation/js/foundation/foundation.js"></script>
    <script src="components/foundation/js/foundation/foundation.forms.js"></script>

    <script src="components/jquery.transit/jquery.transit.js"></script>
    <script src="components/underscore/underscore.js"></script>
    <script src="components/openlayers/lib/OpenLayers.js"></script>
    <script src="components/d3/d3.js"></script>
    <script src="components/raphael/raphael.js"></script>
    <script src="components/knockout/build/output/knockout-latest.js"></script>
    <script src="components/knockout-mapping/knockout.mapping.js"></script>

    <script src="vendor/fd-slider/fd-slider.js"></script>
    
    <script src="build/js/device.js"></script>
    <script src="app/js/spectrum.js"></script>
    <script src="app/js/polar.js"></script>
    <script src="build/js/sim.js"></script>
    <script src="build/js/main.js"></script>
    <script src="build/js/map.js"></script>
  </body>
</html>
